<template>
  <Swiper slide-per-view="auto" :grab-cursor="true">
  <SwiperSlide v-for="(item,index) of banners" :key="item.targetId">
    <img :src="item.pic" alt="" class="banner-pic">
  </SwiperSlide>
  </Swiper>
</template>

<script setup lang="ts">
//获取 vue 基础框架内容
import { ref , onMounted} from "vue";
import { Swiper, SwiperSlide } from 'swiper/vue'
import 'swiper/css'
// 这里开始发起 http 请求获取后端接口
import {useBannerStore} from "@/store/banner"; // 状态管理 pinia
// 实例化 pinia 仓库
import { storeToRefs } from "pinia"; // 把取消的响应式数据拿回来使用

const {banners} = storeToRefs(useBannerStore());// 这里是拿到请求是数据
const {getBanners}=useBannerStore(); // 这里的调用请求和方法里面的参数要一致

// 然后这里还需要使用 onMounted 发起请求, 这里表示 挂载完成就要请求触发
onMounted(async()=>{
  await getBanners()
})


// // 也可以直接使用接口请求,不通过 pinia 处理
// import {useBanner} from "@/util/api";
//
// onMounted(async ()=>{
//   let res = await useBanner()
//   console.log("直接拿到结果", res)
//   banners.value = res.banners
//  也可以拿到数据进行渲染
// })

</script>